import React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Icon, SearchBar } from 'antd-mobile';
import { Helmet } from 'react-helmet';
import styles from './Help.less';
import styles2 from '../components/Base/HistorySearch.less';

class Help extends React.Component {

  state = {
    focus: false,
  }

  formatDate = (list) => {
    const arr = ["关于账号", "关于会员", "关于回访", "关于业绩", "关于电子会员卡", "关于优惠券"];
    const arr2 = [];
    for (const item of arr) {
      arr2.push({
        type: item,
        section: [],
      });
    }
    for (const item of list) {
      const index = arr.indexOf(item.type);
      if (index > -1) {
        arr2[index].section.push(item);
      }
    }
    return arr2;
  }

  click = (id) => {
    this.props.dispatch(routerRedux.push({
      pathname: '/helpContent',
      query: {
        id,
      },
    }));
  }

  click2 = () => {
    this.props.dispatch(routerRedux.push('/feedback'));
  }

  change = (value) => {
    if (value.trim().length) {
      this.props.dispatch({ type: 'help/search', payload: { key: value.trim() } });
    }
  }

  submit = (value) => {
    const { recommend } = this.props.knowledge;
    if (recommend.length) {
      this.click(recommend[0]._id);
    }
  }


  render() {
    const list = this.formatDate(this.props.help.list);
    const { recommend } = this.props.help;

    return (
      <div>
        <Helmet>
          <title>
            帮助与反馈
          </title>
        </Helmet>

        <div className={styles.bgInput}>
          <SearchBar
            placeholder="请输入要搜索的关键词"
            onChange={this.change}
            onSubmit={this.submit}
            onFocus={() => {
              this.setState({ focus: true });
            }}
            onBlur={() => {
              setTimeout(() => {
                this.setState({ focus: false });
              }, 50);
            }}
          />
          <div className={styles.feedback} onClick={this.click2}>去反馈</div>
        </div>

        {
          !this.state.focus &&
          <div className={styles.help}>
            {
              list.map((item, index) => (
                <div key={index}>
                  <div className={styles.type}>
                    <span className={styles.line} />
                    {item.type}
                  </div>
                  {
                    item.section.map((i, index) => (
                      <div className={styles.flex} onClick={this.click.bind(this, i._id)} key={index}>
                        <div className={styles.question}>
                          {i.question}
                        </div>
                        <Icon type="right" className={styles.icon} />
                      </div>
                    ))
                  }
                </div>
              ))
            }

            <div className={styles.foot}>
              <span className={styles.span1}>没解决你的疑问？</span>
              <span className={styles.span2} onClick={this.click2}>去反馈 ></span>
            </div>
          </div>
        }

        {
          this.state.focus &&
          <div className={styles.recommend}>
            {
              recommend && recommend.map((item, index) => {
                return (
                  <div key={index} className={styles2.historyItem} onClick={this.click.bind(this, item._id)}>
                    <Icon type={require('../svg/search.svg')} className={styles2.icon1} />
                    <div className={styles2.name}>
                      {item.question}
                    </div>
                    <Icon type={require('../svg/leftTop.svg')} className={styles2.icon2} />
                  </div>
                );
              })
            }
          </div>
        }

      </div>
    );
  }
}

export default connect(({ help }) => ({ help }))(Help);
